<template>
  <div id="Register">
    <el-form
      ref="registerForm"
      :model="registerForm"
      id="RegisterForm"
      :rules="rules"
    >
      <el-form-item required prop="avatarUrl">
        <el-upload
          class="avatar-uploader"
          :action= "uploadServer"
          accept="jpg,jpeg,png"
          :data= "{ bucketName: 'jiaolv',
                   moduleName: 'user' }"
          :show-file-list="false"
          :before-upload="handleBeforeUpload"
          :on-success="handleUrlSuccess"
        >
          <img
            style="
              margin: 0 0 0 20px;
              width: 100px;
              height: 100px;
              border: 1px solid #e9e9e9;
            "
            v-if="registerForm.avatarUrl"
            :src="registerForm.avatarUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item class="padding-inline-20px" prop="name">
        <el-input
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          v-model="registerForm.name"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item class="padding-inline-20px" prop="phone">
        <el-input
          placeholder="请输入手机号(可选)"
          prefix-icon="el-icon-user"
          v-model="registerForm.phone"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item class="padding-inline-20px" prop="email">
        <el-input
          placeholder="请输入Email(可选)"
          prefix-icon="el-icon-user"
          v-model="registerForm.email"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item class="padding-inline-20px" prop="password">
        <el-input
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          v-model="registerForm.password"
          show-password
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item class="margin-bottom-10px">
        <el-button
          type="primary"
          @click="register('registerForm')"
          style="width: 260px"
          >注册</el-button
        >
      </el-form-item>
      <el-form-item class="margin-bottom-0">
        <div id="orders">
          <router-link to="/login">登录</router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from "../api/api.js";
import axios from "@/utils/axios.js";
import { useRouter } from "vue-router";
import md5 from "js-md5";

export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === "") {
        callback();
      }
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error("手机号格式不对"));
      }
      callback();
    };
    return {
      registerForm: {
        name: "",
        phone: "",
        email: "",
        password: "",
        avatarUrl: "",
      },
      uploadServer: api.file.upload,
      rules: {
        name: [
          { required: true, message: "尚未输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 8 个字符之间",
            trigger: "blur",
          },
        ],
        phone: [
          //   { required: true, message: "尚未输入手机号", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
        email: [
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        password: [
          { required: true, message: "尚未输入密码", trigger: "blur" },
          {
            min: 8,
            max: 18,
            message: "长度在 8 到 18 个字符之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(
              this.registerForm.name
            )
          ) {
            alert("用户名不能为Email格式");
            return false;
          }
  
          let form = {
            nickName: this.registerForm.name,
            phone: this.registerForm.phone,
            email: this.registerForm.email,
            password: md5(this.registerForm.password),
            avatarUrl: this.registerForm.avatarUrl,
          }
          console.log(form)
          axios.post(api.account.register, form).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              alert("注册成功");
              useRouter().push({ path: "/" });
            } else {
              alert(res.data.message);
            }
          });
        } else {
          alert("输入有误请重新输入！");
          return false;
        }
      });
    },
    handleBeforeUpload(file) {
      const isJPG = ["image/jpg", "image/jpeg", "image/png"].includes(
        file.type
      );

      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        ElMessage.error("上传头像图片只能是 jpg、jpeg、png 格式!");
      }
      if (!isLt2M) {
        ElMessage.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    handleUrlSuccess(val) {
      this.registerForm.avatarUrl = val.data || "";
    },
  },
};
</script>

<style>
#Register {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: Center;
  height: 100%;
}
#RegisterForm {
  padding-top: 40px;
  width: 300px;
  border: 1px solid #ddd;
  height: 475px;
  border-radius: 2px;
}
.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-bottom-5 {
  margin-bottom: 5px;
}
.margin-bottom-10px {
  margin-bottom: 10px;
}
.padding-inline-20px {
  padding-inline: 20px;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}
.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 15px;
}
</style>